// 配置后的vite.config.ts
// 配置生效后，开发者在项目中可直接做以下操作，无需任何手动导入 / 注册：
// 1 用 Vue 工具函数：直接写 const count = ref(0)、onMounted(() => {})；
// 2 用 Element Plus 组件：直接写 <el-button type="primary">按钮</el-button>、<el-pagination />；
// 3 用 Element Plus 图标：直接写 <IconEpSearch size="20" color="#666" />；
// 4 用 Element Plus 工具函数：直接写 ElMessage.success('提示')；
// 5 简化路径导入：用 import Button from '@/components/Button.vue' 导入自定义组件；
// 6 开发调试：浏览器开发者工具中查看 Vue 组件结构和数据状态。

// 导入Node.js工具：把文件路径转换成浏览器能识别的格式，后面用来简化路径
import { fileURLToPath, URL } from 'node:url';
// 导入Vite的配置工具，让配置有提示，不容易写错
import { defineConfig } from 'vite';
// 导入Vue插件：没有它，Vite就不认识.vue文件，是Vue项目的基础
import vue from '@vitejs/plugin-vue';
// 导入Vue调试工具插件：开发时能在浏览器F12里看到组件结构和数据，方便找bug
import vueDevTools from 'vite-plugin-vue-devtools';
// 导入自动导入工具函数的插件：比如Vue的ref、Element的提示框，不用手动写import
import AutoImport from 'unplugin-auto-import/vite';
// 导入自动导入组件的插件：比如按钮、输入框，不用手动导入和注册
import Components from 'unplugin-vue-components/vite';
// 导入图标处理插件：把图标文件转换成Vue组件，直接就能用
import Icons from 'unplugin-icons/vite';
// 导入图标解析器：告诉插件怎么识别图标（比如叫什么名字、从哪来的）
import IconsResolver from 'unplugin-icons/resolver';
// 导入Element组件解析器：告诉插件怎么识别Element的组件和工具函数
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';
import { viteMockServe } from 'vite-plugin-mock';

// 导出Vite的配置
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 仅导入全局变量文件（避免导入冲突的样式文件）
        additionalData: `@use "@/styles/variable.scss" as *;`,
      },
    },
  },
  // 插件列表：Vite通过这些插件扩展功能
  plugins: [
    // 启用Vue插件：必须加，否则.vue文件用不了
    vue(),
    // 启用Vue调试工具：开发时能用，发布后自动失效
    vueDevTools(),
    // 配置 mock 插件
    viteMockServe({
      // 仅在开发环境启用 mock（可选）
      localEnabled: process.env.NODE_ENV === 'development',
      // mock 文件存放路径（默认是项目根目录的 mock 文件夹）
      mockPath: './mock',
      // 支持读取 ts 文件（如果用 TypeScript 开发）
      supportTs: true,
    }),
    // 配置"自动导入工具函数"的规则
    AutoImport({
      // 自动导入Vue的核心工具（比如ref、reactive），不用写import { ref } from 'vue'
      imports: ['vue'],
      // 解析器：告诉插件要自动导入哪些库的工具函数
      resolvers: [
        ElementPlusResolver(), // 自动导入Element的工具（比如ElMessage提示框）
        IconsResolver({ prefix: 'Icon' }), // 配合图标插件，识别图标相关工具
      ],
      // 生成类型文件：让VS Code认识这些自动导入的函数，不报错且有提示
      dts: 'auto-imports.d.ts',
    }),
    // 配置"自动导入组件和图标"的规则
    Components({
      // 只扫描组件目录，减少扫描量
      dirs: ['src/components'],
      // 解析器：告诉插件要自动导入哪些库的组件
      resolvers: [
        // 自动导入Element的组件（比如按钮、表格），并自动加载它们的样式
        ElementPlusResolver({ importStyle: 'css' }),
        // 自动导入Element的图标：只启用官方图标集（ep），图标组件名以Icon开头
        // 比如搜索图标叫IconEpSearch，直接就能在页面里用
        IconsResolver({ enabledCollections: ['ep'], componentPrefix: 'Icon' }),
      ],
      // 生成类型文件：让VS Code认识这些自动导入的组件，不报错且有提示
      dts: 'components.d.ts',
    }),
    // 配置图标插件的规则
    Icons({
      compiler: 'vue3', // 图标组件按Vue3的语法编译，兼容setup写法
      autoInstall: false, // 关闭自动安装图标库（我们已经手动装好了，避免重复安装）
    }),
    createSvgIconsPlugin({
      // 指定 SVG 图标文件存放的目录
      // process.cwd() 获取当前项目根目录，拼接 'src/assets/icons' 指向图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 定义 SVG 图标的唯一标识格式（用于在代码中引用）
      // [dir] 表示图标在 iconDirs 下的子目录名，[name] 表示图标文件名（不含 .svg 后缀）
      // 示例：src/assets/icons/user/avatar.svg 会被标识为 icon-user-avatar
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
  // 路径配置：简化文件导入的写法
  resolve: {
    alias: {
      // 用@符号代替./src文件夹，比如@/components/Button.vue等价于./src/components/Button.vue
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});
